<template>
  <view class="viewport">
    <!-- 导航栏 -->
    <view class="navbar">
      <navigator open-type="navigateBack" class="back icon-left" hover-class="none"></navigator>
      <view class="title">编辑用户信息</view>
    </view>
    <!-- 头像 -->
    <view class="avatar">
      <view @tap="onAvatarChange" class="avatar-content">
        <!-- 头像显示逻辑 -->
        <image class="image" src="../static/images/OIP.jpg" mode="aspectFill" />
        <button class="button phone" open-type="chooseAvatar" @choose="onChooseAvatar">
          修改头像
        </button>
      </view>
    </view>
    <!-- 表单 -->
    <view class="form">
      <!-- 表单内容 -->
      <view class="form-content">
        <view class="form-item">
          <text class="label">昵称：</text>
          <input class="input" type="text" placeholder="请输入昵称" v-model="UserData.userName" />
        </view>
        <view class="form-item">
          <text class="label">性别：</text>
         <radio-group @change="onGenderChange">
                     <label class="radio">
                       <radio value="男" color="#27ba9b" :checked="UserData?.userSex === '男'" />
                       男
                     </label>
                     <label class="radio">
                       <radio value="女" color="#27ba9b" :checked="UserData?.userSex === '女'" />
                       女
                     </label>
                   </radio-group>
        </view>
        <view class="form-item">
          <text class="label">城市：</text>
          <picker
            class="picker"
            :value="UserData.userAreaCode"
            @change="onFullLocationChange"
            mode="region"
          >
            <view v-if="UserData.userAreaCode">{{ UserData.userAreaCode }}</view>
            <view class="placeholder" v-else>请选择城市</view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">用户备注：</text>
          <input class="input" type="text" placeholder="请输入备注" v-model="UserData.userRemarks" />
        </view>
      </view>
      <!-- 提交按钮 -->
      <button @tap="onSubmit" class="form-button">保存</button>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { putMemberProfileAPI, getMemberProfileAPI } from '@/services/profile';
import { useMemberStore } from '@/stores';

const memberStore = useMemberStore();
const userId = memberStore.profile.userId;
console.log(userId)

interface ProfileDetail {
  userId: number;
  userName: string;
  userSex: string;
  userAreaCode: string;
  userRemarks: string;
}

const profile = ref<ProfileDetail>({
  userId,
  userName: '',
  userSex: '',
  userAreaCode: '',
  userRemarks: ''
});

const UserData = ref<ProfileDetail>({
  userId,
  userName: '',
  userSex: '',
  userAreaCode: '',
  userRemarks: ''
});

// 选择城市后更新 UserData 中的城市信息
const onFullLocationChange = (ev: any) => {
  // 修改前端界面
  UserData.value.userAreaCode = ev.detail.value.join('');
  UserData.value.fullLocation = ev.detail.value.join(' ');
};

// 提交表单
const onSubmit = async () => {
  const { userName, userSex, userAreaCode, userRemarks } = UserData.value;
  const res = await putMemberProfileAPI({
    userId,
    userName,
    userSex,
    userAreaCode,
    userRemarks
  });
  if (res) {
    console.log(res)
    memberStore.setProfile(UserData.value);
    console.log('保存的个人信息:', memberStore.profile);
    // 更新成功后的操作
    uni.navigateBack({
      url: '../my/my',
    });
  } else {
    console.error('更新用户信息失败');
  }
};
// 性别变化时更新数据
const onGenderChange: UniHelper.RadioGroupOnChange = (ev) => {
  UserData.value.userSex = ev.detail.value
}
// 加载页面时获取最新的用户信息
onMounted(async () => {
  // 获取用户信息
  const userData = await getMemberProfileAPI(userId);
  console.log(userData);
  if (userData) {
    profile.value = userData;
    UserData.value = userData.data.userInfoDTO;
  }
});
</script>




<style lang="scss">
page {
  background-color: #f4f4f4;
}

.viewport {
  display: flex;
  flex-direction: column;
  height: 100%;
  // background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
  background-color: F0F0F4;
  background-size: auto 420rpx;
  background-repeat: no-repeat;
}

// 导航栏
.navbar {
  position: relative;

  .title {
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    font-weight: 500;
    color: #fff;
  }

  .back {
    position: absolute;
    height: 80px;
    width: 40px;
    left: 0;
    font-size: 20px;
    color: #A5A5A5;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

// 头像
.avatar {
  text-align: center;
  width: 100%;
  height: 260rpx;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  .image {
    width: 160rpx;
    height: 160rpx;
    border-radius: 50%;
    background-color: #eee;
  }

  .text {
    display: block;
    padding-top: 20rpx;
    line-height: 1;
    font-size: 26rpx;
    color: #fff;
  }
  button{
    border-radius: 25rpx;
    background-color: white;
  }
}

// 表单
.form {
  background-color: #f4f4f4;

  &-content {
    margin: 20rpx 20rpx 0;
    padding: 0 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
  }

  &-item {
    display: flex;
    height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;

    &:last-child {
      border: none;
    }

    .label {
      width: 180rpx;
      color: #333;
    }

    .account {
      color: #666;
    }

    .input {
      flex: 1;
      display: block;
      height: 46rpx;
    }

    .radio {
      margin-right: 20rpx;
    }

    .picker {
      flex: 1;
    }

    .placeholder {
      color: #808080;
    }
  }

  &-button {
    height: 80rpx;
    text-align: center;
    line-height: 80rpx;
    margin: 30rpx 20rpx;
    color: #fff;
    border-radius: 80rpx;
    font-size: 30rpx;
    background-color: #27ba9b;
  }
}
</style>
